import React, { Component } from 'react';

class Control extends Component {
    //声明状态  数据
    state = {
        username:"",
        pwd:"",
        email:""
    }


    //获取账号方法
   /*  saveUsername = (e)=>{
        // console.log(e.target.value);
        //更新数据
        this.setState({
            username:e.target.value
        })
        
    } */
    //获取密码方法
   /*  savePwd = (e)=>{
        //更新数据
        this.setState({
            pwd:e.target.value
        })
    }
 */
     //获取邮箱方法
    /*  saveEmail = (e)=>{
        //更新数据
        this.setState({
            email:e.target.value
        })
    } */


    //获取表单数据
    saveValue = (type)=>{
        return (e)=>{
            this.setState({
                [type]:e.target.value
             })
        }
        
    }

    //登录
    login = ()=>{

        let {username,pwd,email} = this.state;
        alert(`账号是：${username},密码是：${pwd},邮箱是：${email}`);
    }


    //清空表单
    reset = ()=>{
        this.setState({
            username:"",
            pwd:"",
            email:""
        })
    }

    render() {

        //解构赋值
        let {username,pwd,email} = this.state;

        return (
            <div style={{width:500,margin:"20px auto"}}>
                <h1>受控组件</h1>
                <input value={username} onChange={this.saveValue("username")} type="text" placeholder='请输入账号'/><br /><br />
                <input value={pwd}  onChange={this.saveValue("pwd")} type="text" placeholder='请输入密码' /><br /><br />
                <input type="email" value={email} onChange={this.saveValue("email")} /><br /><br />
                <button onClick={this.login}>登录</button>
                <button onClick={this.reset}>清空</button>
            </div>
        );
    }
}

export default Control;